<template>
  <div class="c-martin__article__list">
    <ul class="c-martin_-article__ul">
      <li class="c-martin__article__li" v-for="(art, index) in articles" :key="index" @click="$router.push({name: 'MartinArticleDetail', params: {id: art._id}})">
        <div>
          <div class="c-martin__article__author">
            <span class="c-martin-article__tag" v-if="art.isTop">置顶</span> {{art.username}} {{art.createOn | filterTime}}
          </div>
          <div class="c-martin__article__title">
            {{art.title}}
          </div>
        </div>
        <martin-button class="c-martin_edit" @click.stop.native="editArt(art)">编辑</martin-button>
      </li>
    </ul>
    <div class="c-martin__pagenation">
      <martin-pagenation :total-count="12" :current-page.sync="curPage" @changePage="changePage" :page-size="pageSize"/>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Pagenation from '@/components/Pagenation/Pagenation'

export default {
  name: 'ArticleList',
  filters: {
    filterTime(val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm')
    }
  },
  components: {
    'martin-pagenation': Pagenation
  },
  data() {
    return {
      articles: [],
      pageCount: 1,
      curPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getArticles()
  },
  methods: {
    editArt(art) {
      console.log(art)
      this.$router.push({
        name: 'MartinWriteArticle',
        query: {
          id: art._id
        }
      })
    },
    changePage(page) {
      this.curPage = page
    },
    getArticles() {
      this.$http.get('/article/list', {
        params: {
          curPage: this.curPage,
          pageSize: this.pageSize
        }
      }).then(({data, status}) => {
        if (status === 200) {
          this.articles = data.items
          this.pageCount = data.page.total || 1
        } else this.articles = []
      }).catch(err => {
        console.log(err)
      })
    }
  },
  watch: {
    curPage() {
      this.getArticles()
    }
  }
}
</script>

<style scoped>
.c-martin_edit {
  float: right;
}
.c-martin__article__list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.c-martin__article__title {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
.c-martin_-article__ul {
  flex: 1;
  /* height: 750px; */
  max-height: 100%;
  overflow-y: auto;
}
.c-martin-article__tag {
  margin-right: 20px;
  color: red;
}
.c-martin__article__li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 10px 20px;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}
.c-martin__article__li:hover {
  background: #fafafa;
}
.c-martin__article__author {
  color: #b2bac2;
}
</style>
